<!--
 * @Description: 
 * @Author: spicylemon
 * @Date: 2022-03-05 11:20:37
 * @LastEditors: spicylemon
 * @LastEditTime: 2022-03-06 23:10:26
-->
<template>
  <div class="init">
    <header class="head-box">
      <div class="left-head" @click="returnBtn">取消</div>
      <div class="middle-head">写贴子</div>
      <div class="right-head" @click="showPublishBox">发布帖子</div>
    </header>
    <van-field
      v-model="title"
      :border="false"
      placeholder="输入文章标题..."
      size="large"
      maxlength="18"
      :show-word-limit="true"
      autocomplete="off"
      class="input-title"
    />
    <article>
      <mavon-editor
        class="markdown"
        v-model="content"
        :subfield="false"
        :defaultOpen="'edit'"
        :toolbarsFlag="true"
        :editable="true"
        :boxShadow="false"
        :previewBackground="'#ffffff'"
        :toolbars="{
          preview: true,
          undo: true,
          redo: true,
          link: true,
          imagelink: true,
        }"
        ref="md"
        @imgAdd="imgAdd"
        html="false"
      ></mavon-editor>
    </article>
    <van-popup
      v-model:show="show"
      position="right"
      round
      :style="{ height: '100%', width: '80%' }"
    >
      <header class="publish-head">发布文章</header>
      <div class="publish-content">
        <div class="partition">
          <div class="title">分区:</div>
          <div class="content content-button" v-if="partition">
            <van-button
              class="partition-button"
              :color="item.color"
              :plain="!item.isFocus"
              :key="item.id"
              v-for="item in partition"
              @click="focusPartition(item)"
              >{{ item.partition_name }}</van-button
            >
          </div>
        </div>
        <div class="partition">
          <div class="title">文章封面:</div>
          <div class="content" v-if="partition">
            <van-uploader
              v-model="fileList"
              multiple
              :max-count="1"
              :after-read="afterRead"
            />
          </div>
        </div>
        <div class="partition">
          <div class="title">编辑摘要:</div>
          <div class="content content-summary" v-if="partition">
            <van-cell-group inset>
              <van-field
                v-model="summary"
                placeholder="请输入摘要"
                :rows="4"
                autosize
                type="textarea"
                maxlength="50"
                show-word-limit
              />
            </van-cell-group>
          </div>
        </div>
        <van-button
          type="primary"
          round
          class="publish-button"
          block
          @click="publish"
          >发布</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  uploads,
  create,
  getAllPartition,
} from "@/api/services/article.service";
import { Toast } from "vant";
import { defineComponent, onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    let md = ref();
    let partition = ref([]);
    let content = ref("");
    let title = ref("");
    let summary = ref("");
    const fileList = ref([]);
    const imgAdd = function (pos, file) {
      const data = new FormData();
      data.append("file", file);
      uploads(data).then((res) => {
        let url = res.result.imgPaths;
        md.value.$img2Url(pos, url);
      });
    };
    let show = ref(false);
    const showPublishBox = function () {
      if (title.value.length < 1) {
        Toast.fail("标题未输入");
        return;
      } else if (content.value.length < 1) {
        Toast.fail("未输入文章内容");
        return;
      }
      show.value = true;
    };
    let focusPartitionId = null;
    let previous = null;
    const focusPartition = function (item) {
      if (previous) {
        previous.isFocus = !previous.isFocus;
        previous.color =
          previous.color != "rgb(156, 158, 161)"
            ? "rgb(156, 158, 161)"
            : "#1d7dfa";
        if (previous == item) {
          focusPartitionId = null;
          previous = null;
          return;
        }
      }
      item.isFocus = !item.isFocus;
      item.color =
        item.color != "rgb(156, 158, 161)" ? "rgb(156, 158, 161)" : "#1d7dfa";
      focusPartitionId = item.id;
      previous = item;
    };
    const publish = async function () {
      if (!focusPartitionId) {
        Toast.fail("未选择分区");
        return;
      }
      create(
        content.value,
        summary.value,
        title.value,
        focusPartitionId,
        imgUrl[0]
      ).then((res) => {
        Toast.success("发帖成功");
        console.log(res);
        let id = res.result.article_id;
        router.push({
          path: `/article/${id}`,
        });
      });
    };
    let imgUrl = null;
    const afterRead = function (file) {
      const data = new FormData();
      data.append("file", file.file);
      uploads(data).then((res) => {
        imgUrl = res.result.imgPaths;
      });
    };
    onBeforeMount(() => {
      getAllPartition().then((res) => {
        partition.value = res.result;
        partition.value.forEach((res) => {
          res.color = "rgb(156, 158, 161)";
          res.isFocus = false;
        });
        partition.value.pop();
      });
      return;
    });
    //返回按钮
    const returnBtn = () => {
      window.history.back();
    };
    return {
      content,
      title,
      show,
      partition,
      md,
      fileList,
      summary,
      imgAdd,
      showPublishBox,
      focusPartition,
      publish,
      afterRead,
      returnBtn,
    };
  },
});
</script>

<style scoped>
/* 初始化样式 */
.init {
  text-align: left;
}
/* 头部样式 */
.head-box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  /* border: 1px solid grey; */
  color: black;
}
.left-head {
  font-size: 15px;
  font-weight: 500;
}
.middle-head {
  font-size: 16px;
  font-weight: 600;
}
.right-head {
  font-size: 16px;
  font-weight: 500;
  color: #1d7dfad2;
}
/* 标题输入框样式 */
.input-title {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 600;
}
/* 更改默认样式 */
.markdown {
  border: none !important;
}
.v-note-wrapper .v-note-op {
  border-bottom: none !important;
  padding: 10px !important;
}
/* 发表组件样式 */
.publish-head {
  padding: 24px 20px 16px 20px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #1d2129;
  border-bottom: 1px solid #e5e6eb;
}
.title {
  font-size: 14px;
  flex: 0 0 70px;
}
.publish-content {
  padding: 10px 10px 5px 15px;
}
.partition {
  display: flex;
  margin-top: 20px;
}
.content {
  margin-left: 5px;
  margin-top: -8px;
  flex: 1;
}
/* 按钮样式 */
.content-button {
  margin-left: -30px;
}
.partition-button {
  font-size: 14px;
  line-height: 28px;
  width: 88px;
  height: 28px;
  margin: 5px;
}
/* 摘要样式 */
.van-cell-group--inset {
  margin: 0 !important;
}
.van-cell {
  padding-left: 0;
}
/* 发布按钮 */
.publish-button {
  width: 270px;
}
</style>
